<template>
  <div id="box">
    <div class="left">
      <div>
        <el-form ref="form" label-width="100px">
          <el-form-item label="表格">
            <el-select placeholder="请选择表格">
              <el-option label="GET" value="GET" />
              <el-option label="POST" value="POST" />
              <el-option label="PUT" value="PUT" />
              <el-option label="DELETE" value="DELETE" />
            </el-select>
          </el-form-item>
          <el-form-item label="筛选的字段">
            <el-input placeholder="请输入需要筛选的字段" />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div v-highlight class="code">
      <pre>
        <code class="css"><!-- 声明什么类型的代码 -->

            {
                width:'100px'
            }
        </code>
        <code class="javascript">

            var a = 123;
            var b = document.getElementById('tr')
        </code>
        <code class="html">

            &lt;div&gt;&lt;/div&gt;<!-- html代码需要转义 -->
        </code>
    </pre>
    </div>

  </div>

</template>
<script>
export default {
  data() {
    return {

    }
  },
  mounted: function() {

  },
  methods: {

  }
}
</script>
<style>
.body{
  background: #e9eaee!important;
}
#box{
  padding: 10px;
  background: #e9eaee!important;

}
.code{
   display: none;
}
.left{
    width: 48%;
    display: inline-block;
    background: white;
    padding: 10px;
}
</style>
